<template>
  <!-- 搜索 -->
  <!-- banner -->
  <div class="flex width1200 margin-center mgt-20 mgb-20">
    <div class="flex-left">
      <p class="title-tag">{{title}}</p>
      <el-tree :data="data" :props="defaultProps" accordion :highlight-current='true' @node-click="handleNodeClick">
      </el-tree>
    </div>
    <div class="flex-right">
      <div class="search">
        <el-row class="flex-center mgb-20">
          <el-col :span='2' class="f16 underline">类型</el-col>
          <el-col :span='22'>
            <el-radio-group v-model="radio1">
              <el-radio-button label="上海"></el-radio-button>
              <el-radio-button label="北京"></el-radio-button>
              <el-radio-button label="广州"></el-radio-button>
              <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row >
          <span class="color-red underline">重置筛选条件</span>
        </el-row>
      </div>
      <div class="list">
        <div class="item flex" @click="toDetail" v-for="(i,index) in tableDate" :key='index'>
          <el-image class="cover" :src="i.img" fit="cover">
          </el-image>
          <i class="read">{{i.num}}人学过</i>
          <div class="flex1 flex-between">
            <div class="introduce ">
              <div>
                <p class="line1 f18 mgb-10">{{i.title}}</p>
                <p class="line1 f18">
                  <i class="tag" v-if="i.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in i.tag.split(",")'>{{tag}}</i>
                </p>  
              </div>
              <p>{{i.teacher}}</p>
            </div>
            <div class="mgt-18">
              <el-image class="icon mgr-20" v-if="!i.collection" :src="collection_icon1" fit="cover"></el-image>
              <el-image class="icon mgr-20" v-if="i.collection" :src="collection_icon2" fit="cover"></el-image>
              <el-image class="icon" v-if="!i.download" :src="download_icon1" fit="cover"></el-image>
              <el-image class="icon" v-if="i.download" :src="download_icon2" fit="cover"></el-image>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }],
      title:"",
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      radio1:'上海',
      tableDate:[
        {
          img:require('../assets/img/图层 12@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          num:'275',
          collection:false,
          download:false
        },
        {
          img:require('../assets/img/图层 13@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          num:'999',
          collection:true,
          download:true
        },
        {
          img:require('../assets/img/图层 14@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          num:'66',
          collection:true,
          download:false
        }
      ],
      collection_icon1:require('../assets/img/收 藏 (1)@2x.png'),
      collection_icon2:require('../assets/img/收 藏@2x.png'),
      download_icon1:require('../assets/img/下载1@2x.png'),
      download_icon2:require('../assets/img/已下载@2x.png'),
    };
  },
  created(){
   this.getClassList(this.$route.query.courseType)
    this.title=this.$route.query.title
  },
  watch:{
    '$route'(to,from){
      this.getClassList(to.query.courseType)
      this.title=to.query.title
    }
  },
  methods: {
    getClassList(courseType){
      this.$api.course.getCourseList({classifyingId:courseType}).then((d)=>{
        if(d.code){
          let data = []
            for(let i= 0;i<d.data.length;i++){
              for(let j=0;i<d.data.length;i++){
                
        
              }
            }
        }
      })
    },
    handleNodeClick(data) {
      console.log(data);
    },
    toDetail(){
      this.$router.push({path:'/moralCultivationDetail'})
    }
  }   
};
</script>

<style lang="less" scoped>
@import '../assets/css/variable.less';
.flex-left {
  width: 300px;
  margin-right: 20px;
  background: #ffffff;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
}
.flex-right {
  flex: 1;
  .search {
    width: 100%;
    background: #ffffff;
    box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
    border-radius: 1px;
    padding: 20px;
    box-sizing: border-box;
  }
}
/deep/.el-radio-button{
  margin-right: 10px;
  .el-radio-button__inner{
    padding: 6px 15px;
    border-left: 1px solid #DCDFE6;
    border-radius:4px
  }
}
/deep/ .el-radio-button__inner:hover{
  color:@color-red;
}
/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
  color:#fff;
  box-shadow:none;
  border-color:@color-red;
  background-color:@color-red;
}
/deep/.el-tree-node__content {
  height: 46px;
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: @color-red;
  color: #fff;
}
.list{
  .item{
    height:170px;
    margin-top: 20px;
    position: relative;
    cursor: pointer;
    .read{
      position:absolute;
      width: 80px;
      height: 20px;
      line-height: 20px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background-color: rgb(30 ,30 ,30, .6);
      color: #fff;
      top: 80%;
      left: 0;
      padding-left: 5px;
      font-size: 12px;
    }
    .cover{
      width:170px;
      height:inherit;
    }
    .introduce{
      padding: 16px 27px 0 27px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box;
    }
    .icon{
      width: 28px;
      height: 26px;
    }
    .tag{
      padding: 4px 8px;
      border-radius: 4px;
      margin-right: 10px;
      border: 1px solid #D8D8D8;
      display: inline-block;
      font-size:14px ;
    }
  }
}
</style>